<template>
  <div>
    <el-form ref="form" label-width="80px">
      <el-form-item label="部门名称">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="部门全称">
        <el-input disabled :value="form.fullName"></el-input>
      </el-form-item>
      <el-form-item label="排序码">
        <el-input type="number" v-model="form.sort"></el-input>
      </el-form-item>
      <el-form-item label="描述">
        <el-input type="textarea" v-model="form.description"></el-input>
      </el-form-item>
      <el-form-item label="">
        <el-popconfirm title="确定更新吗？" @onConfirm="onSubmit">
          <el-button slot="reference" type="primary">更新</el-button>
        </el-popconfirm>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getDepartmentDetail, updateDepartment } from '@/api/organization'
export default {
  props: {
    departmentId: {
      type: Number,
      default: 0
    }
  },
  watch: {
    departmentId(val) {
      this.loadData(val)
    }
  },
  data() {
    return {
      form: {name: '', sort: 1, description: '', fullName: ''},
    }
  },
  mounted() {
    this.loadData(this.departmentId)
  },
  methods: {
    async loadData(id) {
      if (!id) {
        return
      }
      let loading = this.$$loading('正在加载...')
      let { data } = await getDepartmentDetail(id)
      Object.assign(this.form, data)
      loading.close()
      document.scrollingElement.scrollTop = 0
    },
    async onSubmit() {
      let loading = this.$$loading('请等待...')
      let {data} = await updateDepartment(this.form)
      loading.close()
      this.form.fullName = data.fullName
      this.$emit("change", this.form)
      this.$message.success('更新成功', '2000')
    }
  },
}
</script>

<style lang="scss" scoped>
</style>
